//动态表格
Vue.component('vanTable', {
    props: ['columns', 'data'],
    template: `<table border="1" cellpadding="20" cellspacing="0">
        <tr>
          <th v-for="item in columns">{{item.title}}</th>
        </tr>
       
        <tr v-for="item in data">
          <td v-for="col in columns">
            {{item[col.key]}}
        
          </td>
        </tr>
    </table>`
  })
  



//tips

Vue.component('van-tips', {
    props: {
      title: String,
      show: Boolean,
    },
    template: '<div class="van-tips" v-show="show">{{title}}</div>'
  })





//loading
Vue.component('van-loading',{
    props:['show'],

    template:`<div class="van-loading" v-show="show"></div>`
})




//按钮
Vue.component('vanButton',{
    props:['title','colortype'],
    template:`
    <button class='van-button' :style='{background:colortype}'>{{title}}</button>
    `
})




//封装导航栏
Vue.component('vanNavBar',{
   props:['title'],
template:`
      <div class='van-nav-bar'>
       <span>&lt 返回</span>
       <span>{{title}}</span>
       <span>搜索</span>
      </div>
`
})